import React from 'react';
import { Button, Balloon } from '@teamix/ui';
import { isPre } from 'utils/tenant';
import { navigateOpen } from 'utils/router';
import track from 'utils/track';

// 支持代码库一键跳Flow创建CI流程
import intl from '../../../../../../../../locale';

export default class FlowBtn extends React.Component {
  goFlow = () => {
    const { pathResource, resourceSubject } = window.FORCE;
    const { projectInfo } = this.props;
    const tpl = {
      type: 'codeup',
      template: {
        id: pathResource.id,
        gitHttpURL: projectInfo.http_url_to_repo,
        branch: resourceSubject.revision,
      },
    };
    const url = `https://${isPre ? 'pre-' : ''}flow.aliyun.com/my/new?sourceTpl=${btoa(
      JSON.stringify(tpl),
    )}`;
    navigateOpen(url);
    track({
      action: 'creat_pipeline',
      page: 'Repo-Files',
      type: '',
      control: '',
    });
  };

  render() {
    const { resourceSubject } = window.FORCE;
    const { revisionType } = resourceSubject;
    const isTagRevision = revisionType === 'tag' || revisionType === 'sha1';
    const { inMoreText } = this.props;
    if (isTagRevision && inMoreText) {
      return (
        <Balloon.Tooltip
          align="t"
          trigger={
            <Button
              type="normal"
              className="cell"
              disabled
              onClick={this.goFlow}
              style={{ marginRight: 8 }}
            >
              {intl.get({
                id: 'code-assets.containers.repoOverviewInfo.flowBtn.CreateAPipeline',
                defaultMessage: '创建流水线',
              })}
            </Button>
          }
        >
          不支持在标签视图下操作，请切换分支视图再试
        </Balloon.Tooltip>
      );
    } else if (inMoreText) {
      return (
        <div onClick={this.goFlow}>
          {intl.get({
            id: 'code-assets.containers.repoOverviewInfo.flowBtn.CreateAPipeline',
            defaultMessage: '创建流水线',
          })}
        </div>
      );
    }
    return (
      <Button type="normal" className="cell" onClick={this.goFlow}>
        {intl.get({
          id: 'code-assets.containers.repoOverviewInfo.flowBtn.CreateAPipeline',
          defaultMessage: '创建流水线',
        })}
      </Button>
    );
  }
}
